Component
Cross Component Interactions in Framer
This is a Framer component for cross-component interactions. It lets you trigger variant switches in components from elements that aren’t inside them. Just set one as the trigger, the other as the target, match their IDs — and you’ve got clean, connected interactions without any nesting.
About the resource
To use the Cross Component Interactions in Framer, start by setting the Mode to either Trigger or Target. A Trigger initiates the interaction, while a Target responds to it with variant changes. In the Trigger Controls, use a unique ID to link the trigger to one or more target components. Choose when the interaction should happen—on hover, click, or when the trigger appears on screen—and optionally set a Delay or keep it working even when the trigger is Off Screen.
In the Target Controls, connect the component that should animate or respond, and define its layout with Width and Height options.
Use Interactions to match the trigger's ID, choose whether to Repeat the animation or not, and specify a Variant if you're not cycling through multiple states. This setup allows you to create connected, coordinated behaviors between components—without wrapping them in a common component.
About the resource
To use the Cross Component Interactions in Framer, start by setting the Mode to either Trigger or Target. A Trigger initiates the interaction, while a Target responds to it with variant changes. In the Trigger Controls, use a unique ID to link the trigger to one or more target components. Choose when the interaction should happen—on hover, click, or when the trigger appears on screen—and optionally set a Delay or keep it working even when the trigger is Off Screen.
In the Target Controls, connect the component that should animate or respond, and define its layout with Width and Height options.
Use Interactions to match the trigger's ID, choose whether to Repeat the animation or not, and specify a Variant if you're not cycling through multiple states. This setup allows you to create connected, coordinated behaviors between components—without wrapping them in a common component.
About the resource
To use the Cross Component Interactions in Framer, start by setting the Mode to either Trigger or Target. A Trigger initiates the interaction, while a Target responds to it with variant changes. In the Trigger Controls, use a unique ID to link the trigger to one or more target components. Choose when the interaction should happen—on hover, click, or when the trigger appears on screen—and optionally set a Delay or keep it working even when the trigger is Off Screen.
In the Target Controls, connect the component that should animate or respond, and define its layout with Width and Height options.
Use Interactions to match the trigger's ID, choose whether to Repeat the animation or not, and specify a Variant if you're not cycling through multiple states. This setup allows you to create connected, coordinated behaviors between components—without wrapping them in a common component.
The trigger and target modes from the properties panel in the cross interactions component in Framer.
The trigger and target modes from the properties panel in the cross interactions component in Framer.
The trigger and target modes from the properties panel in the cross interactions component in Framer.
